<template>
    <!-- 底部tabbar -->
    <div class="tabbar">
      <div class="tabbar-item" :class="activeIndex == item.type ? item.activeClassName : item.defaultClassName " v-for="item,index in tabbars" :key="index" @click="changeTab(item)">
        <span :class="activeIndex == item.type ? 'active' : ''">{{ item.text }}</span>
      </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

//tabbar栏相关数据
let tabbars = ref([
    {type:0,text:'首页',defaultClassName:'tabbar-item-1',activeClassName:'tabbar-item-11'},
    {type:1,text:'分类',defaultClassName:'tabbar-item-2',activeClassName:'tabbar-item-22'},
    {type:2,text:'购物车',defaultClassName:'tabbar-item-3',activeClassName:'tabbar-item-33'},
    {type:3,text:'我的',defaultClassName:'tabbar-item-4',activeClassName:'tabbar-item-44'}
])

//当前激活索引项，对应tabbar的四个 0-home,1-category,2-cart,3-mine
let activeIndex = ref(0);

//路径处理函数，激活当前路径对应的tabbar选项
const dealCurrentPath = (path:string) => {
    if(path == '/home'){
        activeIndex.value = 0;
    } else if (path == '/category'){
        activeIndex.value = 1;
    } else if (path == '/cart'){
        activeIndex.value = 2;
    } else if (path == '/mine'){
        activeIndex.value = 3;
    }
}
//监视当前路径的变化
watch(() => route.path, (newVal,oldVal) => {
    dealCurrentPath(newVal);
},{immediate:true});



//tab切换事件
const changeTab = (tab:any) => {
    activeIndex.value = tab.type;
    //跳转到其它页面
    // router.push('');
    switch (tab.type) {
        case 0:
            router.push("/home");
            break;
        case 1:
            router.push("/category");
            break;
        case 2:
            router.push("/cart");
            break;
        case 3:
            router.push("/mine");
            break; 
        default:
            break;
    }
}


</script>

<style scoped lang='less'>
.tabbar {
    width: 375px;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    background-color: #fff;

    .tabbar-item {
        height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;

        &::before{
            content: "";
            width: 25px;
            height: 25px;
            // background: url("../../assets/tabs/home_default.png"); 
            // background-size: contain;
                    
        }
        span{
            margin-top: 6px;
            font-size: 14px;
            color: #000000;  //#978f8f

            &.active{
                color:#978f8f;
            }
        }
    }
    .tabbar-item-1::before{    
        background: url("../../assets/tabs/home_default.png");
        background-size: contain;
    }
    .tabbar-item-11::before{    
        background: url("../../assets/tabs/home_selected.png");
        background-size: contain;
    }
    .tabbar-item-2::before{    
        background: url("../../assets/tabs/category_default.png");
        background-size: contain;
    }
    .tabbar-item-22::before{    
        background: url("../../assets/tabs/category_selected.png");
        background-size: contain;
    }
    .tabbar-item-3::before{    
        background: url("../../assets/tabs/cart_default.png");
        background-size: contain;
    }
    .tabbar-item-33::before{    
        background: url("../../assets/tabs/cart_selected.png");
        background-size: contain;
    }
    .tabbar-item-4::before{    
        background: url("../../assets/tabs/user_default.png");
        background-size: contain;
    }
    .tabbar-item-44::before{    
        background: url("../../assets/tabs/user_selected.png");
        background-size: contain;
    }
}
</style>